<template>
    <div class="edu-page-warp inschool-register-outer">
        <el-card id="inner">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="注册管理" name="first" id="stu-info">
                    <el-row>
                        <el-col :span="3">
                            <div class="pic" v-if="showDetail">
                                <div v-if="showFace">
                                    <img :src="picture" />
                                </div>
                                <div v-else>个人照片</div>
                            </div>
                            <div v-else>&nbsp;</div>
                        </el-col>
                        <el-col :span="21">
                            <el-form label-width="110px" label-suffix="：">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item :label="$t('label.schoolTerm')">
                                            <el-select
                                                v-model="calendarId"
                                                style="width: 100%;"
                                                @change="calendarChange"
                                            >
                                                <el-option
                                                    v-for="item in calendars"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <div class="open-time" v-if="registDateRanges">
                                            {{$t('stuRegister.explain')}}
                                            <span
                                                v-for="(date,index) in registDateRanges"
                                                :key="'date'+index"
                                            >{{date}}</span>
                                        </div>
                                    </el-col>
                                </el-row>
                                <div v-if="showDetail">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('label.stuCode')">
                                                <el-input
                                                    width="100%"
                                                    readonly
                                                    class="inschool-input"
                                                    v-model="info.studentId"
                                                />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('label.grade')">
                                                <el-input
                                                    width="100%"
                                                    readonly
                                                    class="inschool-input"
                                                    v-model="info.grade"
                                                />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('label.stuName')">
                                                <el-input
                                                    width="100%"
                                                    readonly
                                                    class="inschool-input"
                                                    v-model="info.name"
                                                />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('label.sex')">
                                                <el-input
                                                    width="100%"
                                                    readonly
                                                    class="inschool-input"
                                                    v-model="info.sex"
                                                />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('label.college')">
                                                <el-input
                                                    width="100%"
                                                    readonly
                                                    class="inschool-input"
                                                    v-model="info.faculty"
                                                />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('label.major')">
                                                <el-input
                                                    width="100%"
                                                    readonly
                                                    class="inschool-input"
                                                    v-model="info.profession"
                                                />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('label.trainingLevel')">
                                                <el-input
                                                    width="100%"
                                                    readonly
                                                    class="inschool-input"
                                                    v-model="info.trainingLevel"
                                                />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('label.trainingCategory')">
                                                <el-input
                                                    width="100%"
                                                    readonly
                                                    class="inschool-input"
                                                    v-model="info.trainingCategory"
                                                />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('dic.degreeType')">
                                                <el-input
                                                    width="100%"
                                                    readonly
                                                    class="inschool-input"
                                                    v-model="info.degreeType"
                                                />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('label.formLearning')">
                                                <el-input
                                                    width="100%"
                                                    readonly
                                                    class="inschool-input"
                                                    v-model="info.formLearning"
                                                />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('label.lengthSchooling')">
                                                <el-input
                                                    width="100%"
                                                    readonly
                                                    class="inschool-input"
                                                    v-model="info.schoolSystem"
                                                />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item
                                                :label="$t('culturePlan.enterSchoolDate')"
                                            >
                                                <el-input
                                                    width="100%"
                                                    readonly
                                                    class="inschool-input"
                                                    v-model="info.enrolDate"
                                                />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="预计毕业时间">
                                                <el-input
                                                    width="100%"
                                                    readonly
                                                    class="inschool-input"
                                                    v-model="info.expectGraduateTime"
                                                />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('stuRegister.paymentStatus')">
                                                <el-input
                                                    width="100%"
                                                    readonly
                                                    class="inschool-input"
                                                    :value="getPaymentStatusText(info.paymentStatus)"
                                                />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('stuRegister.registStatus')">
                                                <el-input
                                                    width="100%"
                                                    readonly
                                                    class="inschool-input"
                                                    v-model="info.registrationStatusI18n"
                                                />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12" align="right" style="margin-top:5px">
                                            <el-button
                                                type="primary"
                                                @click="regist"
                                                v-if="showRegistBtn"
                                            >{{$t('stuRegister.regist')}}</el-button>
                                            <el-button @click="close">{{$t('message.close')}}</el-button>
                                        </el-col>
                                    </el-row>
                                </div>
                                <el-row v-if="showWarning">
                                    <el-col :span="24" class="warning">
                                        <el-form-item>
                                            <i class="el-icon-warning"></i>当前注册不在控制时间范围内，请与学院管理员联系。
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row v-if="showWarning">
                                    <el-col :span="12">
                                        <el-form-item>
                                            <div style="text-align:center">
                                                <el-button @click="close">{{$t('message.close')}}</el-button>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="历史记录" name="second">
                    <edu-table
                        :data="historys"
                        size="mini"
                        style="width:100%"
                        :order="false"
                        :selection="false"
                        @page-change="handleCurrentChange"
                        :total="queryForm.total_"
                        :pageSize="queryForm.pageSize_"
                        :current-page="queryForm.pageNum_"
                    >
                        <el-table-column
                            :label="$t('label.schoolTerm')"
                            show-overflow-tooltip
                            width="180"
                            prop="calendarName"
                        ></el-table-column>
                        <el-table-column :label="$t('label.grade')" width="110" prop="currentGrade"></el-table-column>
                        <el-table-column :label="$t('label.stuCode')" width="110" prop="studentId"></el-table-column>
                        <el-table-column
                            :label="$t('label.stuName')"
                            width="110"
                            prop="name"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            :label="$t('stuRegister.registStatus')"
                            show-overflow-tooltip
                            prop="registStatusI18n"
                            width="110"
                        ></el-table-column>
                        <el-table-column
                            :label="$t('stuRegister.registDate')"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">{{getFormateDate(scope.row.registTime)}}</template>
                        </el-table-column>
                        <el-table-column label="注册操作人" prop="operatorName" show-overflow-tooltip></el-table-column>
                    </edu-table>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>
<script>
import {
    registPrompt,
    studentregist,
    registered,
    registManageList,
    getMaxCalendar,
    getAllowCalendar
} from "common/src/api/studentRegister";
import { getImageData } from "common/src/api/teacherinfo";
import { mapActions } from "vuex";
import moment from "moment";
export default {
    name: "RegisterRoleManage",
    data() {
        return {
            curProjId: '',
            activeName: "first",
            tmpActiveName: "first",
            calendarId: "",
            studentId: null,
            showDetail: false,
            showWarning: false,
            showRegistBtn: false,
            registDateRanges: null, //注册时间段，字符串数组
            showFace: false,
            picture: null,
            info: {
                studentId: "",
                grade: "",
                name: "",
                sex: "",
                faculty: "",
                profession: "",
                trainingLevel: "",
                trainingCategory: "",
                degreeType: "",
                formLearning: "",
                schoolSystem: "",
                enrolDate: "",
                expectGraduateTime: "",
                paymentStatusI18n: "",
                registrationStatusI18n: ""
            },
            historys: null,
            queryForm: {
                keyWord: null,
                total_: 0,
                pageSize_: 20,
                pageNum_: 1
            },
            id: null,
            calendars: null,
            paymentStatus: [
                    { value: 1, label: "是" },
                    { value: 0, label: "否" },
                ]
        };
    },
    mounted() {
        let session = localStorage.getItem("sessiondata");
        session = JSON.parse(session);
        let user = session.mockUser || session.user;
        // 1：本科生; 2：研究生; 4：在职研究生; 
        this.curProjId = user.projId;
        this.studentId = user.uid;
        this.queryForm.keyWord = user.uid;
        // console.log(Number(this.$store.getters.getProjectId()), 'sdfd');
        
        //获取学期列表
        getAllowCalendar().then(res => {
            if (res.code == 200) {
                this.calendars = res.data.map(d => {
                    return {
                        label: d.fullName,
                        value: d.id
                    };
                });
                if (this.calendars.length > 0) {
                    getMaxCalendar().then(res_ => {
                        if (res_.code == 200 && res_.data) {
                            this.calendarId = res_.data;
                            if (
                                !res.data.some(c => c.value == this.calendarId)
                            ) {
                                this.calendarId = this.calendars[0].value;
                            }
                            this.calendarChange();
                        }
                    });
                } else {
                    this.showWarning = true;
                }
            }
        });
    },
    methods: {
        ...mapActions(["delTab"]),
        handleClick(tab, event) {
            if (this.activeName == this.tmpActiveName) return;
            this.tmpActiveName = this.activeName;
            if (this.activeName == "second") {
                this.queryForm.pageSize_ = 20;
                this.queryForm.pageNum_ = 1;
                this.queryForm.total_ = 0;
                this.getHistory();
            }
        },
        calendarChange() {
            this.registDateRanges = null;
            registPrompt(this.calendarId).then(res => {
                let result = false;
                if (res.code == 200 && res.data) {
                    let dates = null;
                    if (res.data.bks) {
                        dates = res.data.bks;
                    } else if (res.data.yjs) {
                        dates = res.data.yjs;
                    } else if (res.data.bs) {
                        dates = res.data.bs;
                    }
                    //dates必须是数组，表示多个注册时间段
                    if (dates && Array.isArray(dates)) {
                        let current = new Date().getTime();
                        result = dates.some(t => {
                            let inRange = false;
                            if (t.startTime && current >= t.startTime) {
                                inRange = true;
                            }
                            if (inRange && t.endTime && current > t.endTime) {
                                inRange = false;
                            }
                            return inRange;
                        });
                        //设置注册开发时间范围
                        this.registDateRanges = dates.map(date =>
                            date.endTime
                                ? moment(date.startTime).format(
                                      "YYYY-MM-DD HH:mm:ss"
                                  ) +
                                  "~" +
                                  moment(date.endTime).format(
                                      "YYYY-MM-DD HH:mm:ss"
                                  )
                                : moment(date.startTime).format(
                                      "YYYY-MM-DD HH:mm:ss"
                                  ) + "~"
                        );
                    }
                }
                this.showDetail = result;
                this.showWarning = !result;
                if (result) {
                    this.getStudentInfo();
                }
            });
        },
        close() {
            this.delTab("/inSchoolStudentRegister");
            window.history.back();
        },
        getStudentInfo() {
            studentregist({
                studentId: this.studentId,
                calendarId: this.calendarId
            }).then(res_ => {
                if (res_.code == 200 && res_.data.length > 0) {
                    this.info.studentId = res_.data[0].studentId;
                    this.info.grade = res_.data[0].currentGrade;
                    this.info.name = res_.data[0].name;
                    this.info.sex = res_.data[0].sexI18n;
                    this.info.faculty = res_.data[0].facultyI18n;
                    this.info.profession = res_.data[0].professionI18n;
                    this.info.trainingLevel = res_.data[0].trainingLevelI18n;
                    this.info.trainingCategory =
                        res_.data[0].trainingCategoryI18n;
                    this.info.degreeType = res_.data[0].degreeTypeI18n;
                    this.info.formLearning = res_.data[0].formLearningI18n;
                    this.info.schoolSystem = res_.data[0].lengthSchooling;
                    this.info.enrolDate = res_.data[0].enrolDate;
                    this.info.expectGraduateTime = res_.data[0].expectGraduateTime && res_.data[0].expectGraduateTime.substring(0,10)
                    this.info.registrationStatusI18n =
                        res_.data[0].registStatusI18n;
                    this.info.paymentStatus = res_.data[0].paymentStatus;
                    this.showRegistBtn =
                        res_.data[0].registStatus == 1 ? false : true;
                    this.id = res_.data[0].id;
                    this.loadImage(res_.data[0].photo);
                }
            });
        },
        regist() {
            registered(this.id).then(res => {
                if (res.code == 200) {
                    this.showRegistResult(res);
                    this.getStudentInfo();
                }
            });
        },
        getHistory() {
            registManageList(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.historys = res.data.list;
                    this.queryForm.total_ = res.data.total_;
                }
            });
        },
        handleCurrentChange(val) {
            this.queryForm.pageSize_ = val.pageSize;
            this.queryForm.pageNum_ = val.pageNum;
            this.getHistory();
        },
        loadImage(objectKey) {
            if (objectKey) {
                getImageData(objectKey).then(response => {
                    if (response.code == 200 && response.data) {
                        this.showFace = true;
                        this.picture = response.data.base;
                    }
                });
            }
        },
        showRegistResult(res) {
            if (res.data) {
                let msg = "";
                for (const key in res.data) {
                    msg += "<div style='margin:5px 0'>" + key + "</div>";
                }
                this.$message({
                    showClose: true,
                    duration: 0,
                    dangerouslyUseHTMLString: true,
                    type: "error",
                    message: msg
                });
            } else {
                this.$message({
                    showClose: true,
                    duration: 0,
                    dangerouslyUseHTMLString: true,
                    type: "success",
                    message: this.info.trainingLevel == '本科'
                    ?"注册成功，请持本科生证至所在学院加盖注册章。" 
                    :"注册成功，请持研究生证至所在学院加盖注册章。"
                });
            }
        },
        getFormateDate(val) {
            return val ? moment(val).format("YYYY-MM-DD HH:mm:ss") : null;
        },
        getPaymentStatusText(val) {
            if(val){
                let p = this.paymentStatus.find(p => p.value == val);
                return p.value == 1 ? '是' : '否';
            }
            return ''
        }
    }
};
</script>
<style lang="scss">
.inschool-register-outer {
    .inschool-input {
        & > input {
            background: #f5f7f9;
        }
    }
}
</style>
<style lang="scss" scoped>
.inschool-register-outer {
    height: calc(100% - 8px);
    #inner {
        min-height: 100%;
    }
    .open-time {
        margin: 0 0 10px 110px;
        color: red;
        span {
            margin-right: 20px;
            line-height: 22px;
        }
    }
    .pic {
        margin: 65px auto 0;
        border: 1px solid #d2d4d6;
        width: 132px;
        height: 162px;
        div {
            width: 120px;
            height: 150px;
            margin: 5px;
            background: #e4e4e4;
            color: #6c7685;
            line-height: 150px;
            font-size: 15px;
            font-weight: bold;
            text-align: center;
        }
        img {
            width: 120px;
            height: 150px;
        }
    }
    .warning {
        margin: 10px 0;
        i {
            margin-right: 8px;
        }
    }
}
#stu-info {
    ::v-deep .el-form-item--small.el-form-item {
        margin-bottom: 5px;
    }
}
#inner {
    ::v-deep .el-card__body {
        padding: 15px;
    }
    ::v-deep .el-tabs__header {
        margin: 0 0 10px;
    }
}
</style>
